<template>
  <!--  <div style="height: 10vh"></div>-->
  <div class="page-container">
    <!-- 头部导航 -->
    <header class="header">
      <div class="header-container">
        <div class="logo">
          <img src="./assets/images/logo.png" alt="云图工作室"/>
        </div>
        <button class="nav-toggle" @click="toggleNav">☰</button>
        <nav class="nav-menu" :class="{ 'is-active': isNavOpen }">
          <a href="#" class="nav-item active">首页</a>
          <a href="#intro" class="nav-item">云图简介</a>
          <a href="#news" class="nav-item">新闻资讯</a>
          <a href="#team" class="nav-item">团队介绍</a>
          <a href="#project" class="nav-item">项目案例</a>
          <a href="#footer" class="nav-item">联系我们</a>
        </nav>
      </div>
    </header>
    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 右侧悬浮导航 -->
      <div class="float-nav">
        <a href="#" class="float-nav-item">
          <img src="./assets/images/sidebar/首页.svg" alt="">
          <span class="tooltip">首页</span>
        </a>
        <a href="#intro" class="float-nav-item">
          <img src="./assets/images/sidebar/简介.svg" alt="">
          <span class="tooltip">简介</span>
        </a>
        <a href="#news" class="float-nav-item">
          <img src="./assets/images/sidebar/新闻.svg" alt="">
          <span class="tooltip">新闻</span>
        </a>
        <a href="#project" class="float-nav-item">
          <img src="./assets/images/sidebar/案例.svg" alt="">
          <span class="tooltip">案例</span>
        </a>
        <a href="#footer" class="float-nav-item">
          <img src="./assets/images/sidebar/联系我们.svg" alt="">
          <span class="tooltip">联系</span>
        </a>
      </div>
      <!-- Swiper轮播部分 -->
      <swiper
          v-if="bannersList.length"
          :modules="[Navigation, Pagination, Autoplay]"
          :slides-per-view="1"
          :loop="true"
          :autoplay="{
          delay: 2000,
          disableOnInteraction: false,
        }"
          :pagination="{
          clickable: true,
        }"
          :navigation="true"
          class="hero-swiper"
      >
        <swiper-slide v-for="(banner, index) in bannersList" :key="index">
          <div class="hero-slide">
            <img
                :src="globalConfig.baseAssetsUrl + banner.fileList[0]?.filePath"
                :alt="banner.title"
                class="banner-image"
            />
          </div>
        </swiper-slide>
      </swiper>


    </main>
    <!--简介-->
    <div class="intro-section" id="intro">
      <!-- 标题 -->
      <h2 class="intro-title">
        <div class="title-p">
          <p>云图</p>
          <p>简介</p>
        </div>
      </h2>
      <!-- 描述内容 -->
      <p class="intro-description">
        云图工作室，成立于2022年，是由专业负责人刁建忠老师创立
        自成立以来，云图工作室积极参与校内外的各类项目开发和设计工作。
        云图工作室不仅注重技术实现，还强调用户体验品质和创新需求的结合。
        我们致力于探索最新的技术和创新能力，创造可能。
      </p>
      <!-- 底部标语 -->
      <div class="intro-slogan">
        <p>探索无限，创造可能</p>
      </div>
    </div>
  </div>
  <!--新闻资讯-->
  <article class="article-container" id="news">
    <!-- 标题 -->
    <h2 class="intro-title">
      <div class="title-p">
        <p>新闻</p>
        <p>资讯</p>
      </div>
    </h2>
    <div class="article-row">
      <div v-if="loading" class="loading">加载中...</div>
      <div v-else-if="articleList.length" class="grid">
        <div class="article-content-1">
          <img
              :src="
                globalConfig.baseAssetsUrl +
                extractAndCleanImageSrcs(articleList[0].content)
              "
              alt=""
          />

          <div class="article-text">
            <div class="article-title">
              {{ articleList[0].title }}
            </div>
            <p>
              {{ extractTextContent(articleList[0].content) }}
            </p>
          </div>
        </div>
        <div class="article-content-2">
          <div
              class="article-content"
              v-for="(article, index) in articleList.slice(1, 3)"
              :key="index"
          >
            <img
                :src="
                  globalConfig.baseAssetsUrl +
                  extractAndCleanImageSrcs(article.content)
                "
                alt=""
            />
            <div class="article-text">
              <div class="article-title">
                {{ article.title }}
              </div>
              <p>
                {{ extractTextContent(article.content) }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="error">文章加载失败，请稍后再试。</div>
    </div>
  </article>


  <!--  团队介绍 -->
  <div class="member-container">
    <!-- 标题 -->
    <h2 class="intro-title">
      <div class="title-p" id="team">
        <p>团队</p>
        <p>介绍</p>
      </div>
    </h2>

    <swiper
        :slidesPerView="'auto'"
        :spaceBetween="30"
        :freeMode="true"
        :pagination="{
      clickable: true,
    }"
        :modules="[Navigation, Pagination, Autoplay, FreeMode]"
        class="mySwiper"
    >
      <!--      指导老师-->
      <swiper-slide>
        <div class="swiper-container">
          <div class="swiper-image">
            <img src="./assets/images/content/暂无消息.png"
                 class="banner-image" alt="">
          </div>
          <div class="swiper-content">
            <h2>指导老师</h2>
            <p>
              刁建忠老师是我们工作室的技术核心，专注于软件的设计与实现指导。
              他精通多种编程语言和开发框架，擅长将创意转化为功能强大的应用程序。
              无论是前端界面还是后端逻辑，刁建忠老师都能为团队提供专业的技术支持与指导。
            </p>
          </div>
        </div>
      </swiper-slide>
      <!--      开发组-->
      <swiper-slide>
        <div class="swiper-container">
          <div class="swiper-image">
            <img src="./assets/images/content/暂无消息.png"
                 class="banner-image" alt="">
          </div>
          <div class="swiper-content">
            <h2>开发组</h2>
            <p>
              开发组是我们工作室的技术核心，专注于软件的设计与实现。
              组员们精通多种编程语言和开发框架，
              擅长将创意转化为功能强大的应用程序。无论是前端界面还是后端逻辑，开发组都能高效协作，
              确保产品的高质量和稳定性。
            </p>
          </div>
        </div>
      </swiper-slide>
      <!--      设计组-->
      <swiper-slide>
        <div class="swiper-container">
          <div class="swiper-image">
            <img src="./assets/images/content/暂无消息.png"
                 class="banner-image" alt="">
          </div>
          <div class="swiper-content">
            <h2>设计组</h2>
            <p>
              设计组负责产品的视觉与用户体验设计，致力于打造美观、易用的界面。组员们熟练运用设计工具，注重细节与创新，
              确保每个项目在视觉上吸引用户的同时，
              也能提供流畅的操作体验。设计组是连接技术与用户的重要桥梁。</p>
          </div>
        </div>
      </swiper-slide>
      <!--      测试组-->
      <swiper-slide>
        <div class="swiper-container">
          <div class="swiper-image">
            <img src="./assets/images/content/暂无消息.png"
                 class="banner-image" alt="">
          </div>
          <div class="swiper-content">
            <h2>测试组</h2>
            <p>测试组是产品质量的守护者，专注于发现并修复软件中的问题。通过严谨的测试流程和自动化工具，
              测试组确保每个功能都经过全面验证，保障产品的稳定性和可靠性。他们的工作为最终用户提供了无忧的使用体验。</p>
          </div>
        </div>
      </swiper-slide>
      <!--      新媒体组-->
      <swiper-slide>
        <div class="swiper-container">
          <div class="swiper-image">
            <img src="./assets/images/content/暂无消息.png"
                 class="banner-image" alt="">
          </div>
          <div class="swiper-content">
            <h2>新媒体组</h2>
            <p>
              新媒体组负责工作室的对外宣传与品牌建设，通过社交媒体、官网等渠道展示我们的成果与动态。
              组员们擅长内容创作、运营策划和数据分析，致力于提升工作室的知名度与影响力，
              吸引更多合作伙伴与用户关注。</p>
          </div>
        </div>
      </swiper-slide>
    </swiper>

  </div>
  <!--项目案例 -->
  <div class="project-container">
    <!-- 标题 -->
    <h2 class="intro-title" id="project">
      <div class="title-p">
        <p>项目</p>
        <p>案例</p>
      </div>
    </h2>
    <swiper
        :effect="'coverflow'"
        :grabCursor="true"
        :centeredSlides="true"
        :slidesPerView="'auto'"
        :initialSlide="1"
        :coverflowEffect="{
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      }"
        :pagination="true"
        :modules="[Navigation, Pagination, Autoplay, EffectCoverflow]"
        class="mySwiper"
    >
      <swiper-slide v-for="(banner, index) in bannersList" :key="index">
        <div class="hero-slide">
          <!--          <img-->
          <!--              :src="globalConfig.baseAssetsUrl + banner.fileList[0]?.filePath"-->
          <!--              :alt="banner.title"-->
          <!--              class="banner-image"-->
          <!--          />-->
          <img src="./assets/images/content/暂无消息.png"
               class="banner-image" alt="">
        </div>
      </swiper-slide>
    </swiper>
  </div>

  <!-- 底部 -->
  <!--  底栏-->
  <footer class="footer">
    <div class="footer-top">
      <div class="footer-top-content" id="footer">
        <p>准备好加入我们云图大家庭了吗？</p>
        <a href="#">立即加入</a>
      </div>
    </div>

    <div class="footer-center">
      <div class="footer-left">
        <div class="logo-img">
          <img src="./assets/images/logo-d.png" alt="">
        </div>
      </div>
      <div class="footer-right">
        <div class="footer-section">
          <h3>关于我们</h3>
          <ul>
            <li>工作室简介</li>
            <li>团队介绍</li>
            <li>发展历程</li>
          </ul>
        </div>

        <div class="footer-section">
          <h3>作品集</h3>
          <ul>
            <li>个人作品</li>
            <li>参赛作品</li>
            <li>团队作品</li>
          </ul>
        </div>

        <div class="footer-section">
          <h3>帮助中心</h3>
          <ul>
            <li>常见问题</li>
            <li>网站导航</li>
            <li>友情链接</li>
          </ul>
        </div>

        <div class="footer-section">
          <h3>联系我们</h3>
          <ul>
            <li>服务热线：123456789</li>
            <li>工作室邮箱：279768490@QQ.com</li>
            <li>工作室地址：顺德职业技术学院信息副楼五楼</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="footer-bottom">
      <p class="copyright">&copy; 2025 云图工作室</p>
      <div class="social-icons">
        <span class="iconfont icon-weixin"></span>
        <span class="iconfont icon-weibo"></span>
        <span class="iconfont icon-lianjie"></span>
      </div>
    </div>
  </footer>
</template>

<script setup>
import {onMounted, ref} from "vue";
import DOMPurify from "dompurify"; // 用于净化HTML内容，防止XSS攻击
/* swiper部分*/
import {Swiper, SwiperSlide} from "swiper/vue";
import {Autoplay, EffectCoverflow, FreeMode, Navigation, Pagination} from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import 'swiper/css/free-mode';
// 3d
import "swiper/css/effect-coverflow";

//导入api接口
import {listBanner} from "@/api/business/banner";
import {listArticle} from "@/api/business/article/index.js";
import globalConfig from "@/config/globalConfig";

// 数据
const bannersList = ref([]);
const articleList = ref({});
const loading = ref(true);

// 获取bannerList数据
const fetchBanners = async () => {
  try {
    const res = await listBanner();
    bannersList.value = res.rows;
  } catch (error) {
    console.error("获取banner失败:", error);
  }
};

// 获取文章列表
const fetchArticleList = async () => {
  try {
    const res = await listArticle();
    articleList.value = res.rows;
  } catch (error) {
    console.error("获取文章失败:", error);
  } finally {
    loading.value = false;
  }
};

// 净化HTML内容，防止XSS攻击
const sanitizeContent = (html) => {
  return DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ["img", "p", "br", "strong", "em"],
    ALLOWED_ATTR: ["src", "alt", "href"],
  });
};

// 富文本提取
function extractAndCleanImageSrcs(content) {
  const imgTagRegex = /<img[^>]+src="([^">]+)"/g;
  const srcs = [];

  let match;
  while ((match = imgTagRegex.exec(content)) !== null) {
    // 去掉 /dev-api 或 /prod-api 前缀
    const cleanedSrc = match[1].replace(/^\/(dev|prod)-api/, "");
    srcs.push(cleanedSrc);
  }

  return srcs;
}

function extractTextContent(content) {
  // 使用正则表达式去除所有 HTML 标签
  return content.replace(/<[^>]*>/g, "").trim();
}

const isNavOpen = ref(false);

const toggleNav = () => {
  console.log(isNavOpen.value);
  isNavOpen.value = !isNavOpen.value;
};


onMounted(() => {
  fetchBanners();
  fetchArticleList();
});
</script>

<style lang="scss" scoped>


// 变量定义
$primary-color: #2275ff;
$text-color: #333;
$white: #fff;
$footer-bg-color: #6c7787;
$footer-text-color: #ffffff;
$footer-link-bg-color: #1c69ea;
$footer-border-color: #e0e0e0;


// 主要内容区域样式
.main-content {
  //margin-top: 85px;
  position: relative;
  width: 100%;
  //height: calc(100vh - 60px); // 减去header高度
  background-size: cover;
  background-position: center;
  //margin-top: 60px; // header高度
  overflow: hidden;
  //background: yellow;
  .hero-swiper {
    width: 100%;
    max-height: 800px; /* 减去头部导航的高度 */
  }

  // 轮播图指示器
  :deep(.swiper-pagination) {
    & .swiper-pagination-bullet {
      width: 77px;
      height: 8px;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.5);
      margin: 0 5px; /* 增加间距 */
      transition: all 1s ease;
    }

    & .swiper-pagination-bullet-active {
      width: 143px;
      background: $primary-color;
    }
  }

  .hero-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: white;

    img {
      width: 100%;
      //max-height: 800px; /* 减去头部导航的高度 */
      max-height: 100vh;
      object-fit: cover;
    }
  }

}

// 中央标题样式
.hero-section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: $white;
  z-index: 2;

  .hero-title {
    font-size: 48px;
    font-weight: bold;
    letter-spacing: 4px;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .hero-line {
    width: 100px;
    height: 3px;
    background-color: $white;
    margin: 0 auto;
  }
}

/*文章列表 */
.article-container {
  background: url("./assets/images/bg.png") no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  @extend %breathe-anm;

  .intro-title {
    @extend %intro_title;
  }

  h1 {
    text-align: center;
    padding-top: 50px;
    color: black;
  }

  .article-row {
    width: 85%;
    //background: #ffffff;
    @extend %Advanced-style;
    border-radius: 21px 21px 21px 21px;
    padding: 60px;

    .grid {
      width: 100%;
      display: flex;
      align-items: center;
      // flex-wrap: wrap;
      gap: 30px;

      .article-content-1 {
        width: 45%;
        height: 773px;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
        border-radius: 20px 20px 20px 20px;
        position: relative;

        & img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 20px 20px 20px 20px;
        }

        & .article-text {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 302px;
          background: rgba(189, 189, 189, 0.3);
          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
          border-radius: 0 0 20px 20px;
          font-weight: bold;
          color: white;
          padding: 40px;

          & .article-title {
            font-weight: 700;
            font-size: 36px;
            line-height: 52px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }

          p {
            height: 188px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 8; // 限制显示6行
            text-overflow: ellipsis;
          }
        }
      }

      .article-content-2 {
        width: 50%;
        height: 773px;

        .article-content {
          width: 100%;
          height: 378px;
          position: relative;
          // margin: 20px 0; /* 增加左右间距 */
          margin-bottom: 20px;
          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
          border-radius: 20px 20px 20px 20px;

          & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px 20px 20px 20px;
          }

          & .article-text {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 152px;
            background: rgba(189, 189, 189, 0.3);
            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
            border-radius: 0 0 20px 20px;
            font-weight: bold;
            color: white;
            padding: 40px;

            & .article-title {
              font-weight: 700;
              font-size: 36px;
              line-height: 52px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            p {
              height: 188px;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 8; // 限制显示6行
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }

  // 响应式设计
  @media screen and (max-width: 768px) {
    .article-row {
      padding: 20px;

      .grid {
        flex-direction: column; // 在小屏幕上垂直排列

        .article-content-1,
        .article-content-2 {
          width: 100%; // 占满宽度
          height: auto; // 自动高度
        }
      }
    }
  }

  .loading,
  .error {
    text-align: center;
    margin-top: 50px;
    color: #333;
  }
}

//tian
//这两个变量用来调整字体大小
$w: 2rem;
$h: calc($w * 1.5);
%intro_title {
  width: 100%;
  padding-top: 20px;
  font-size: calc($w * 1.2); /* 标题字体增大 */
  font-weight: bold;
  color: #333;
  position: relative;
  //display: inline-block;
  //margin-bottom: 30px; /* 增加标题和内容之间的间距 */
  margin: 0;
  display: flex;

  .title-p {
    //display: block;
    margin: 0 auto;
    display: flex;
    position: relative;
    height: $h;

    p {
      padding: 0;
      margin: 0;

      &:last-child {
        color: $primary-color;
      }
    }

    &::before {
      content: "";
      position: absolute;
      top: 3.5rem;
      left: 50%;
      transform: translate(-50%, 0px);
      width: $w; /* 下划线宽度加大 */
      height: 4px; /* 下划线高度加大 */
      background-color: #3478f6; /* 蓝色下划线 */
      //margin: 10px auto 0;
      border-radius: 2px;
    }
  }
}

.intro-section {
  //background: linear-gradient(135deg, #e8f1ff, #f5f9ff); /* 背景渐变色 */
  background: url("./assets/images/bg.png") no-repeat;
  background-size: cover;
  //padding: 100px 20px; /* 增加上下内边距 */
  text-align: center; /* 居中对齐 */
  @extend %breathe-anm;

  .intro-title {
    @extend %intro_title;
  }

  .intro-description {
    width: 45%;
    padding-top: calc($h * 1.45);
    font-size: calc($w / 1.7); /* 描述文字字体增大 */
    line-height: 2; /* 增加行间距 */
    color: #555;
    max-width: 1000px; /* 更宽的最大宽度 */
    margin: 0 auto 50px; /* 增加底部间距 */
    font-weight: 500;
  }

  .intro-slogan {
    font-size: $w; /* 标语字体增大 */
    font-weight: bold;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    //position: relative;
    //display: inline-block;
    margin-bottom: calc($h / 1.066);
    color: #333;;
    padding: 10px;

    .slogan-underline {
      content: "";
      display: block;
      //width: 140px; /* 下划线宽度加大 */
      //height: 4px; /* 下划线高度加大 */
      //background-color: #3478f6; /* 蓝色下划线 */
      margin: $h auto 0;
      //border-radius: 2px;
      width: $w; /* 下划线宽度加大 */
      height: 4px; /* 下划线高度加大 */
      background-color: #3478f6; /* 蓝色下划线 */
      //margin: 10px auto 0;
      border-radius: 2px;
    }

    p {
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: $h;
        left: 50%;
        transform: translate(-50%, 0px);
        width: $w; /* 下划线宽度加大 */
        height: 4px; /* 下划线高度加大 */
        background-color: #3478f6; /* 蓝色下划线 */
        //margin: 10px auto 0;
        border-radius: 2px;
      }
    }
  }
}

.project-container {
  //background: radial-gradient(100% 70% at 45% 50%, #2275FF 0%, rgba(216, 216, 216, 0) 100%);
  background: url("./assets/images/bg.png") no-repeat;
  background-size: cover;
  padding: 80px 20px; /* 增加上下内边距 */
  text-align: center; /* 居中对齐 */
  @extend %breathe-anm;

  .intro-title {
    @extend %intro_title;
  }
}

/*成员介绍 */
.member-container {
  background: url("./assets/images/bg.png") no-repeat;
  background-size: cover;
  padding: 80px 20px; /* 增加上下内边距 */
  text-align: center; /* 居中对齐 */
  @extend %breathe-anm;

  .intro-title {
    @extend %intro_title;
  }

  .mySwiper {
    width: 100%;
    height: 100%;

    :deep(.swiper-slide) {

      text-align: center;
      font-size: 18px;
      //background: #fff;
      @extend %Advanced-style;
      /* Center slide text vertically */
      display: flex;
      //justify-content: center;
      //align-items: center;
      border-radius: 20px;
      padding: 28px;

      .swiper-container {
        display: flex;
        //flex-wrap: wrap;
        .swiper-image {
          width: 65%;
          border-radius: 20px;

          & img {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            object-fit: cover;
          }
        }

        .swiper-content {
          width: 45%;
          margin-left: 20px;
          position: relative;
          top: 60px;
          //padding:30px 0;
          h2 {
            font-size: 40px;
            color: #000000;
            letter-spacing: 3px;
            font-weight: bold;
          }

          p {
            margin-top: 30px;
            font-weight: 550;
            font-size: 14px;
            letter-spacing: 1px;
            color: #333;

          }
        }

      }
    }
  }

}

.mySwiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;

  :deep(.swiper-wrapper) {
    margin-bottom: 50px;
  }

  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 500px;
    height: 500px;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
  }

  // 轮播图指示器
  :deep(.swiper-pagination) {
    & .swiper-pagination-bullet {
      width: 57px;
      height: 8px;
      border-radius: 15px;
      background: #e0e0e0;
      margin: 0 5px; /* 增加间距 */
      transition: all 0.4s ease;
    }

    & .swiper-pagination-bullet-active {
      width: 123px;
      background: $primary-color;
    }
  }
}

// 右侧悬浮导航样式
.float-nav {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 8px;
  padding: 10px 10px;
  box-shadow: 0 0 8px 3px rgba(0, 96, 255, 0.2); /* 浅蓝色阴影 */
  z-index: 100;
  @extend %Advanced-style;

  .float-nav-item {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    cursor: pointer;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;


    img {
      width: 95%;
    }

    &:hover {
      //background-color: #CDE2FF;
      background-color: white;
      transform: scale(1.2);

      .tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
      }
    }

    .tooltip {
      position: absolute;
      right: calc(100% + 10px);
      //background-color: rgba(0, 0, 0, 0.8);
      @extend %Advanced-style;
      color: black;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 14px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transform: translateX(10px);
      transition: all 0.3s ease;

      &::after {
        content: "";
        position: absolute;
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        border-left: 6px solid rgba(0, 0, 0, 0.8);
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
      }
    }

    i {
      font-size: 20px;
    }
  }
}

// Header 样式
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 9%;
  //background-color: $white;
  @extend %Advanced-style;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;

  .header-container {
    max-width: 1920px;
    height: 100%;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo {
    display: flex;
    align-items: center;

    img {
      height: 79px;
      width: 234px;
    }

    .logo-text {
      margin-left: 10px;
      font-size: 18px;
      font-weight: 500;
      color: $text-color;
    }
  }

  .nav-menu {
    display: flex;
    position: relative;
    right: 0;
    width: 842px;
    justify-content: flex-end;
    transition: max-height 0.3s ease-out; // 添加过渡效果
    .nav-item {
      position: relative;
      text-decoration: none;
      color: $text-color;
      //font-size: 26px;
      //padding: 8px 0;
      //font-size: 1.35vw;
      font-size: 1.2rem;
      font-weight: 500;
      //line-height: normal;
      letter-spacing: 0;
      margin-right: 3.56vw;
      text-align: center;
      line-height: 38px;
      transition: all 0.3s ease;

      &:last-child {
        margin-right: 0;
      }

      &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        //height: 2px;
        //width: 45px;
        height: 4px;
        background-color: $primary-color;
        transition: width 0.3s ease;
        //background: #000;
        border-radius: 50px;
        opacity: 1;
        //background: #263238;
      }

      &:hover {
        color: $primary-color;

        &::before {
          width: 100%;
        }
      }

      &.active {
        color: $primary-color;

        &::before {
          width: 100%;
        }
      }
    }
  }

  .nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }

  &.is-active {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .header {
    .nav-toggle {
      display: block;
    }

    .nav-menu {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 85px;
      right: 0;
      background-color: $white;
      width: 100%;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease-out;

      &.is-active {
        display: flex;
        // 根据需要调整最大高度
        transition: all 0.3s ease-out;
      }

      .nav-item {
        margin: 10px 0;
        text-align: center;
        font-size: 1.5rem;
      }
    }
  }
}


.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 2;

  .hero-title {
    font-size: 48px;
    font-weight: bold;
    letter-spacing: 4px;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .hero-line {
    width: 100px;
    height: 3px;
    background-color: #fff;
    margin: 0 auto;
  }
}

.footer {
  background-color: $footer-bg-color;
  color: $footer-text-color;
  text-align: center;
  font-size: 1rem;

  .copyright {
    margin: 0;
  }

  &-top {
    padding: 20px 0;
    width: 100%;
    height: 242px;
    background: url("./assets/images/footer.top.jpg") no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: end;

    .footer-top-content {
      display: flex;
      justify-content: flex-end;
      text-align: right;
      flex-direction: column;
      margin-right: 95px;
      position: relative;
      align-items: flex-end;

      p {
        height: 70px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 700;
        font-size: 2.9rem;
        color: #ffffff;
        line-height: 67px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin: 0;
        padding-bottom: 13px;
      }

      a {
        display: block;
        font-size: 2rem;
        background-color: #1c69ea;
        color: #fff;
        text-decoration: none;
        border-radius: 14px;
        width: 296px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        margin-right: 30px;
      }
    }
  }

  &-center {
    display: flex;
    justify-content: space-around;
    padding: 40px 0;
    border-bottom: 1px solid $footer-border-color;

    .footer-left {
      width: 261px;

      .logo-img {
        width: 100%;
        height: 246px;

      }

      .studio-name-en {
        font-size: 1.3rem;
      }
    }

    .footer-right {
      margin-top: 3rem;
      display: flex;
      justify-content: space-between;
      width: 60%;

      .footer-section {
        text-align: left;

        h3 {
          font-size: 1.9rem;
          letter-spacing: 5.5px;
          margin-bottom: 23px;
        }

        ul {
          list-style: none;
          padding: 0;

          li {
            margin-bottom: 1.5rem;
          }
        }
      }
    }
  }

  &-bottom {
    font-size: 1.5rem;
    line-height: 4rem;
  }

  // 响应式设计
  @media (max-width: 768px) {
    &-top {
      .footer-top-content {
        p {
          display: none;
        }
      }
    }

    &-top {
      flex-direction: column;
      justify-content: center;

      .footer-top-content {
        margin-right: 0;
        text-align: center;
      }
    }

    &-center {
      flex-direction: column;
      align-items: center;

      .footer-right {
        width: 100%;
        flex-direction: column;
        align-items: center;

        .footer-section {
          text-align: center
        }
      ;
      }
    }
  }
}

%Advanced-style {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(30px);
}

%breathe-anm {
  animation: breathe 5s infinite ease-in-out;
}

@keyframes breathe {
  0% {
    background-position: 0 0;
    background-size: 100% 100%;
  }
  50% {
    background-position: 100% 100%;
    background-size: 120% 120%;
  }
  100% {
    background-position: 0 0;
    background-size: 100% 100%;
  }
}
</style>
